
<script setup lang="ts">
	
	import customWifi from './wifi.vue'
	
	const emits = defineEmits<{ (emit: 'update:show', bool: boolean): void }>()
	withDefaults(defineProps<{
		color?: string
		isPlay?: boolean
	}>(), {
		color: "#68d7bb"
	});

	
</script>

<template>
	<view 
		:style="{ color }"
		:class="{ active: isPlay }" 
		class="flex justify-between audio round-full items-center" 
	>
		<custom-wifi :active="isPlay" :color="color" />
	</view>
</template>

<script lang="ts">
	export default {
		options: { virtualHost: true }
	}
</script>

<style scoped lang="scss">
	.audio {
		&.active{opacity: 0.8}
	}
	
	.wifi-symbol {
	    box-sizing: border-box;
	    transform: rotate(135deg) translate3d(0, 0, 0);
	    -webkit-transform: rotate(135deg) translate3d(0, 0, 0);
	    backface-visibility: hidden;
	    -webkit-backface-visibility: hidden;
	}
	
	.wifi-circle {
	    border: 5rpx solid;
	}
	
	.first {
	    top: 45rpx;
	    left: 45rpx;
	}
	
	.second {
	    top: 35rpx;
	    left: 35rpx;
	}
	
	.third {
	    top: 25rpx;
	    left: 25rpx;
	}
	
	.active {
		.second {
			animation: fadeInOut 1s infinite 0.2s;
			-webkit-animation: fadeInOut 1s infinite 0.2s;
		}
	
		.third {
			animation: fadeInOut 1s infinite 0.4s;
			-webkit-animation: fadeInOut 1s infinite 0.4s;
		}
	}
	
	@keyframes fadeInOut {
	    0%{opacity: 0}
	    100%{opacity: 1}
	}
</style>